<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Tagsinput Checkbox</title>
    <!--https://www.jb51.net/article/170548.htm-->
    <!--http://www.jq22.com-->
    <link rel="stylesheet" type="text/css" href="../plugins/jquery_tagsinput/css/jquery.tagsinput.css" >
    <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
    <script src="../plugins/jquery_tagsinput/js/jquery.tagsinput.js" ></script>
</head>


<body>
<!--业务需求：可以根据checkbox的先后勾选传递有顺序的值让后台接收，决定用tagsinput显示checkbox的先后勾选顺序，并实时响应checkbox的勾选状态-->
<!--思路：checkbox的值存在一个数组A，新创建一个数组B，如果选中一个，B push一个值，取消一个，remove一个值，因为数组是有序的，就做到响应checkbox的勾选顺序-->
<h3>记录checkbox勾选的顺序</h3>
<!--注意:id要保持唯一性-->
<div><input type="checkbox" id="Apple" name="fruit" value="Apple" onclick="checkedHandle(this)" />苹果</div>
<div><input type="checkbox" id="Pear" name="fruit" value="Pear" onclick="checkedHandle(this)" />梨</div>
<div><input type="checkbox" id="Banana" name="fruit" value="Banana" onclick="checkedHandle(this)" />香蕉</div>
<div><input type="checkbox" id="Orange" name="fruit" value="Orange" onclick="checkedHandle(this)" />橘子</div>
<br><br>
<input type="text" id="fruit-tags" name="fruit-tags" >
<input type="text" id="fruitChecked">
<script type="text/javascript">
    var fruitName = [];
    document.getElementsByName("fruit").forEach(function (obj){
        fruitName.push($(obj).parent("div").text());
    })
    $('#fruit-tags').tagsInput({
        interactive: false,
        removeWithBackspace: false,
        onRemoveTag:  function(tag){
            //重点 通过值获得数组的索引//////////////////////缺陷,名称同名
            var index = fruitName.indexOf(tag);
            var box=$("input:checkbox[name=fruit]").eq(index);
            box.prop("checked",false);
            fruitValue.removeBy(box.attr("id"));
            $('#fruitChecked').val(fruitValue.toString());
        }
    });


    var fruitValue = new Array();
    function checkedHandle(obj){
        var idVal=$(obj).attr("id");
        // --- 选中 push--
        if($(obj).is(':checked')){//选中
            if($('#fruitChecked').val().indexOf(idVal) == -1){//没有匹配
                $('#fruit-tags').addTag($(obj).parent("div").text());
                fruitValue.push(idVal);
            }
        }else{//取消选中
            var indexof=$('#fruitChecked').val().indexOf(idVal);
            if(indexof> -1){
                $('#fruit-tags').removeTag($(obj).parent("div").text());
                fruitValue.removeBy(idVal);//通过id移除
            }
        }
        $('#fruitChecked').val(fruitValue.toString());
    }

    /**
     * array.splice(index,howmany,item1,.....,itemX)
     * index 	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
     * howmany	可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
     * item1, ..., itemX	可选。要添加到数组的新元素
     */
    Array.prototype.removeBy = function(val) {
        for(var i=0; i<this.length; i++) {
            if(this[i] == val) {
                this.splice(i, 1);
                break;
            }
        }
    };



</script>
</body>
</html>